<template>
  <div class="left">
    <ul class="ul1">
      <li
        :class="index === cur ? 'on' : ''"
        @click="cur = index"
        v-for="(item, index) in left"
        :key="index"
      >
        <i :class="item.icon"></i>
        <span>{{ item.txt }}</span>
      </li>
    </ul>

    <div class="leftcon">
      <!-- 模块 -->
      <div class="left-menu" v-if="cur === 0">
        <div class="basis">
          <span>基础组件</span>
        </div>
        <div v-for="(item, index) in list" :key="index">
          <div
            class="item"
            @click="comClick(item, index)"
            @dragend="dragend"
            @dragstart="dragstart(item, index)"
            draggable="true"
          >
            <img draggable="false" :src="item.icon" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>

      <!--控件-->
      <div class="left-control" v-if="cur === 1">
        <ul style="border-top:1px solid #eee;">
          <li v-for="(item, index) in control" :key="index">
            <el-checkbox
              :disabled="item.id == 1"
              @change="controlSelect(item)"
              :checked="item.attrs.show"
            >{{ item.name }}</el-checkbox>
            <div class="fr">
              <em class="el-icon-edit-outline" @click.stop="$parent.controlClick(item.id)"></em>
            </div>
          </li>
        </ul>
      </div>

      <!-- 历史版本 -->
      <div class="left-control" v-if="cur === 2">
        <ul style="border-top:1px solid #eee;">
          <li v-for="(item, index) in pageList" :key="item.id">
            <span>{{ item.name }}</span>
            <div style="display: flex;">
              <el-button
                size="mini"
                style="margin-right:5px"
                v-if="item.isUsing == 0"
                slot="reference"
                @click="use(item)"
              >使用</el-button>
              <el-button
                size="mini"
                v-else
                disabled
                slot="reference"
                plain
                type="primary"
                style="margin-right: 5px;"
              >当前正在使用</el-button>
              <el-popconfirm
                title="确定删除该版本吗？"
                icon="el-icon-info"
                icon-color="red"
                @confirm="del(item.id, index)"
              >
                <el-button
                  size="mini"
                  slot="reference"
                  :disabled="item.isUsing == 0 ? false : true"
                >删除</el-button>
              </el-popconfirm>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import module from "@/util/module.js";
import { getPageList, deletePage } from "@/api/api.js";
export default {
  name: "Left",
  data() {
    return {
      id: 1,
      left: [
        { txt: "模块", icon: "el-icon-menu" },
        { txt: "控件", icon: "el-icon-s-operation" },
        { txt: "历史版本", icon: "el-icon-c-scale-to-original" },
      ],
      cur: 0,
      list: [], //模块
      control: [], //控件
      pageList: [],
    };
  },

  mounted() {
    //页面组件
    this.list = module.pageData;
    //控件
    this.control = module.controlData;
    this.getPageList();
  },
  methods: {
    // 开始拖拽
    dragstart(item, index) {
      event.dataTransfer.setData("index", index);
      event.dataTransfer.setData("moduleData", JSON.stringify(item));
      event.dataTransfer.effectAllowed = "copyMove";
      this.$emit("placeholder", true);
    },

    // 拖拽结束
    dragend() {
      this.$emit("placeholder", false);
    },

    // 组件点击
    comClick(item, index) {
      console.log(item, index);
      let json = JSON.stringify(item);
      this.$emit("componentsClick", json, index);
      if (item.type == 11) {
        item.attrs.show = !item.attrs.show
        this.$parent.controlSelect(item);
        console.log(item);
      }
    },

    //控件选择
    controlSelect(item) {
      item.attrs.show = !item.attrs.show
      this.$parent.controlSelect(item);
    },

    // 获取数据
    async getPageList() {
      const { data } = await getPageList({ pageIndex: 1, limit: 10 })
      this.pageList = data.itemList
    },

    // 删除版本
    async del(id, index) {
      await deletePage(id)
      this.$message.success("删除成功");
      this.pageList.splice(index, 1);
    },
    // 使用版本 (仅预览，若不点击保存则不会改变小程序中使用的版本)
    use({ id, name }) {
      this.pageList.forEach(item => {
        item.id == id ? item.isUsing = 1 : item.isUsing = 0
      });
      this.$parent.changePage(id)
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
$color: #29c8a1;
.left {
  width: 450px;
  display: flex;
  background: #273239;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  .ul1 {
    width: 80px;
    padding-top: 65px;
    li {
      color: #8e9499;
      cursor: pointer;
      height: 100px;
      &.on {
        background: #1a242b;
        color: #fff;
      }
      &:hover {
        color: #fff;
      }
      i {
        font-size: 18px;
        padding-bottom: 5px;
      }
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-weight: bold;
      font-size: 14px;
    }
  }
  .leftcon {
    flex: 1;
    height: 100%;
    background: #fff;
    overflow: hidden auto;
    border-left: 1px solid #eee;
  }
  .left-menu {
    padding-top: 65px;
    /deep/ .el-collapse-item__header {
      font-size: 14px;
      font-weight: bold;
      color: #444;
      padding-left: 12px;
    }
    .hm {
      border-top: 1px solid #eee;
      padding-top: 15px;
    }
    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      &:hover {
        border-color: $color;
        box-shadow: #409eff 0 0 10px;
      }
      img {
        width: 50%;
        padding-bottom: 10px;
      }
      cursor: move;
      text-align: center;
      padding: 10px;
      border: 1px solid #f7f7f7;
      float: left;
      width: 28%;
      margin-bottom: 15px;
      margin-left: 15px;
    }
  }
  .left-control {
    padding-top: 65px;
    ul {
      border-top: 1px solid #eee;
      padding: 0 20px;
    }
    ul li {
      height: 50px;
      border: 1px solid #eee;
      border-radius: 5px;
      margin-top: 12px;
      display: flex;
      background: #f7f7f7;
      padding: 0 12px;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #666;
      .fl {
        flex: 1;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        &.on {
          color: $color;
        }
      }
      .fr {
        button {
          background: none;
          border: 0;
          -webkit-appearance: none;
          &[disabled]:hover {
            cursor: not-allowed;
            em {
              color: #999;
              cursor: not-allowed;
            }
          }
        }
        em {
          margin-left: 8px;
          font-size: 18px;
          color: #999;
          cursor: pointer;
          &:hover {
            color: $color;
          }
        }
      }
    }
    .add-page {
      span {
        margin-right: 12px;
      }
      cursor: pointer;
      height: 45px;
      border: 1px solid #eee;
      margin: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $color;
      color: #fff;
      border-radius: 40px;
    }
  }
  .basis {
    width: 92.3%;
    height: 50px;
    margin: 14px;
    display: flex;
    align-items: center;
    background-color: #f7f7f7;
    padding-left: 20px;
    font-size: 15px;
  }
}
</style>
